<template>
  <div class="container">
    <div class="head">购物车</div>
    <ShoopItem
      v-for="item in shoopList"
      :key="item.id"
      :count="item.count"
      :id="item.id"
      :image="item.image"
      :isCheck="item.check1"
      :name="item.intro"
      :price="item.price"
      :typeOf="item.name"
      @updateCount="newCount"
      @updateIsCheck="newCheck"
    ></ShoopItem>
    <div class="settlement">
      <span
        ><input
          type="checkbox"
          name=""
          id="a"
          :checked="isSelectAll"
          @change="taggerCheck"
        /><label for="a">全选</label></span>
      <span style="color: white; font-size: 24px"
        >{{ sunPrice }}<em style="font-size: 20px; color: red">￥</em>
      </span>
      <button class="sunBtn">结 算</button>
    </div>
  </div>
</template>

<script>
import ShoopItem from "./shoopItem.vue";
import { computed } from "vue";
export default {
  components: {
    ShoopItem,
  },
  data() {
    return {
      shoopList: [],
      // 是否全选
      selectAll: false,
      flag: true,
    };
  },
  provide() {
    return {
      shoopList: computed(() => this.shoopList),
    };
  },
  created() {
    this.getGoodsList();
  },
  methods: {
    taggerCheck() {
      if (this.flag) {
        this.flag = false;
        let selectList = [];
        if (!this.isSelectAll) {
          this.shoopList.forEach((item) => {
            if (item.check1 !== 1) {
              selectList.push({ id: item.id, check: 1 });
            }
          });
        } else {
          this.shoopList.forEach((item) => {
            if (item.check1 !== 0) {
              selectList.push({ id: item.id, check: 0 });
            }
          });
        }
        this.changeCheck(selectList);
      } else {
        this.isSelectAll = this.isSelectAll;
      }
    },
    // 修改全选状态状态
    changeCheck(list) {
      this.$http({
        method: "POST",
        url: "selectList",
        data: {
          goodsList: list,
        },
      }).then((res) => {
        if (res.data.status === 200) {
          this.flag = true;
          this.getGoodsList();
        }
      });
    },
    getGoodsList() {
      this.$http({
        method: "get",
        url: "getGoods",
      }).then((res) => {
        if (res.data.status === 200) {
          this.shoopList = res.data.queryData;
        } else {
          this.shoopList = [];
        }
      });
    },
    // 修改商品数量
    newCount(val) {
      this.$http({
        method: "post",
        url: "upDateCount",
        data: {
          id: val[1],
          count: val[0],
        },
      }).then((res) => {
        if (res.data.status === 200) {
          this.getGoodsList();
        } else {
          alert("修改数量失败");
        }
      });
    },
    newCheck(val) {
      // console.log(val)
      this.$http({
        method: "post",
        url: "updateCheck",
        data: {
          id: val[1],
          check: val[0],
        },
      }).then((res) => {
        // console.log(res.data)
        if (res.data.status === 200) {
          this.getGoodsList();
        } else {
          alert("修改状态失败");
        }
      });
    },
  },
  computed: {
    sunPrice() {
      let sun = 0;
      this.shoopList.forEach((item) => {
        if (item.check1) {
          sun += item.price * item.count;
        }
      });
      return sun.toFixed(2);
    },
    // 判断是否全选
    isSelectAll() {
      let is = true;
      this.shoopList.some((item) => {
        // console.log(item.check1)
        if (item.check1 === 0) {
          is = false;
        }
      });
      return is;
    },
  },
};
</script>

<style scoped>
.container {
  width: 100vw;
  height: 100vh;
  padding-top: 10px;
  margin: 0 auto 0;
  overflow: auto;
}
.head {
  position: fixed;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 100%;
  height: 60px;
  text-align: center;
  line-height: 60px;
  font-size: 24px;
  background-color: aqua;
  color: white;
  /* margin-bottom: 20px; */
}
.settlement {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 60px;
  display: flex;
  box-sizing: border-box;
  padding-left: 20px;
  padding-right: 20px;
  justify-content: space-between;
  align-items: center;
  background-color: lightskyblue;
}
.sunBtn {
  width: 120px;
  height: 40px;
  background-color: #0277d8;
  color: white;
  border-radius: 40px;
  border: 0;
}
</style>